<!-- 充值申请 -->
<template>
  <view class="recharge-container">
	  <HeaderBar :currentName="currentName" :cuttentRight="cuttentRight"></HeaderBar>
	  
	  <!-- 二维码区域 -->
	  <view class="qr-section">
	    <div class="qr-card">
	      <div class="qr-header">
	        <h3 class="qr-title">扫码充值</h3>
	        <p class="qr-subtitle">使用钱包扫描二维码进行充值</p>
	      </div>
	      <div class="qr-code-wrapper">
	        <QRCode :address="address"></QRCode>
	      </div>
	    </div>
	  </view>

	  
	  <!-- 申请信息 -->
	  <view class="applyMes">
	    <!-- 充值地址卡片 -->
	    <div class="info-card address-card">
	      <div class="card-header">
	        <div class="header-icon">📍</div>
	        <div class="header-text">
	          <h4 class="card-title">{{ _t18('recharge_address', ['bitmake']) }}({{ route.query.type }})</h4>
	          <p class="card-subtitle">请复制以下地址到您的钱包进行转账</p>
	        </div>
	      </div>
	      <div class="card-content">
	        <div class="address-wrapper">
	            <input class="address-text fw-num" readonly :value="address"></input>
	          
	          </div>
              <div class="copy-btn" @click="_copy(address)">
	              <span class="copy-icon">📋</span>
	              <span class="copy-text">复制</span>
	            </div>
	      </div>
	    </div>
		<div class="info-card address-card">
			<div class="card-header">
			  <!-- <div class="header-icon">📍</div> -->
			  <div class="header-text">
				<h4 class="card-title">转账地址({{ route.query.type }})</h4>
				<!-- <p class="card-subtitle">请复制以下地址到您的钱包进行转账</p> -->
			  </div>
			</div>
			<div class="card-content">
			  <div class="address-wrapper">
				  <input class="address-text fw-num"  v-model="adress"></input>
				 <!-- <div class="copy-btn">
					<span class="copy-icon">📋</span>
					<span class="copy-text">复制</span>
				  </div> -->
				</div>
			</div>
	    </div>
	    <template
	      v-if="
	        !['coinsexpto', 'rxce', 'gmtoin', 'aams', 'bitbyex', 'gmmoin'].includes(
	          _getConfig('_APP_ENV')
	        )
	      "
	    >
	      <!-- 充值数量卡片 -->
	      <div class="info-card amount-card">
	        <div class="card-header">
	          <div class="header-icon">💰</div>
	          <div class="header-text">
	            <h4 class="card-title">{{ _t18('recharge_number', ['bitmake']) }}</h4>
	            <p class="card-subtitle">请输入您要充值的数量</p>
	          </div>
	        </div>
	        <div class="card-content">
	          <div class="input-wrapper">
	            <input 
	              type="number" 
	              :placeholder="_t18('recharge_input')" 
	              class="amount-input ff-num" 
	              v-model="num" 
	            />
	            <div class="input-icon">💵</div>
	          </div>
	        </div>
	      </div>
	      
	      <!-- 上传截图卡片 -->
	      <div class="info-card upload-card">
	        <div class="card-header">
	          <div class="header-icon">📷</div>
	          <div class="header-text">
	            <h4 class="card-title">{{ _t18('recharge_imgUpload', ['bitmake']) }}</h4>
	            <p class="card-subtitle">上传支付详情截图</p>
	          </div>
	        </div>
	        <div class="card-content">
	          <van-uploader :after-read="afterRead" max-count="1" v-model="fileList">
	            <div class="upload-area">
	              <div class="upload-icon">
	                📷
	              </div>
	              <p class="upload-text">点击上传截图</p>
	              <p class="upload-hint">支持 JPG、PNG 格式</p>
	            </div>
	          </van-uploader>
	        </div>
	      </div>
	    </template>
	  </view>
	  <template v-if="['coinsexpto', 'rxce', 'bitbyex', 'gmmoin'].includes(_getConfig('_APP_ENV'))">
	    <!-- 复制按钮 -->
	    <div class="action-section">
	      <button class="action-btn copy-btn" @click="_copy(address)">
	        <span class="btn-icon">📋</span>
	        <span class="btn-text">{{ _t18('copy') }}</span>
	      </button>
	    </div>
	    
	    <!-- 充值说明列表 -->
	    <div class="tips-section" v-if="['bitbyex'].includes(_getConfig('_APP_ENV'))">
	      <div class="tips-card">
	        <div class="tips-header">
	          <h4 class="tips-title">💡 充值说明</h4>
	        </div>
	        <div class="tips-content">
	          <div class="tip-item" v-for="(item, index) in tipList2" :key="index">
	            <div class="tip-icon">ℹ️</div>
	            <div class="tip-text">{{ item.content }}</div>
	          </div>
	        </div>
	      </div>
	    </div>
	    <div class="tips-section" v-else>
	      <div class="tips-card">
	        <div class="tips-header">
	          <h4 class="tips-title">💡 充值说明</h4>
	        </div>
	        <div class="tips-content">
	          <div class="tip-item" v-for="(item, index) in tipList" :key="index">
	            <div class="tip-number">{{ index + 1 }}</div>
	            <div class="tip-text">{{ item.content }}</div>
	          </div>
	        </div>
	      </div>
	    </div>
	  </template>
	  
	  <template v-else-if="['gmtoin'].includes(_getConfig('_APP_ENV'))">
	    <div class="tips-section">
	      <div class="tips-card">
	        <div class="tips-header">
	          <h4 class="tips-title">💡 账户信息</h4>
	        </div>
	        <div class="tips-content">
	          <div class="tip-item">
	            <div class="tip-icon">ℹ️</div>
	            <div class="tip-text">{{ _t18('account_balance_info') }}</div>
	          </div>
	        </div>
	      </div>
	    </div>
	  </template>
	  
	  <template v-else-if="['aams', 'gmmoin'].includes(_getConfig('_APP_ENV'))"> </template>
	  
	  <template v-else>
	    <!-- 确认充值 -->
	    <div class="action-section">
	      <button class="action-btn submit-btn" @click="submit">
	        <span class="btn-icon">✅</span>
	        <span class="btn-text">{{ _t18('recharge_require', ['bitmake']) }}</span>
	      </button>
	    </div>
	  </template>
  </view>
</template>
<script setup>
import { uploadImg } from '@/api/common/index.js'
import { rechargeSubmit, getUserRechageNewApi } from '@/api/account.js'
import { _toView, _hideAddress, _t18, _getConfig } from '@/utils/public'
import { priceFormat } from '@/utils/decimal'
import QRCode from '@/components/common/QRCode/index.vue'
import Copy from '@/components/common/Copy/index.vue'
import HeaderBar from '@/components/HeaderBar/index.vue'
import { showToast } from 'vant'
import { debounce } from 'lodash'
import { useToast } from '@/hook/useToast'
import { useCopy } from '@/hook/useCopy'
import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from '@/store'
import { onMounted, reactive } from 'vue'
const adress = ref('')
const { _toast } = useToast()
const { _copy } = useCopy()
const route = useRoute()
const router = useRouter()
// 充值
const currentName = `${_t18('recharge', ['latcoin'])} ${route.query.type}`
const cuttentRight = { iconRight: [{ iconName: 'jilu', clickTo: '/recharge-order' }] }
/**
 * 充值说明
 */
const tipList = reactive([
  { content: _t18('recharge_tip1') },
  { content: _t18('recharge_tip2') },
  { content: _t18('recharge_tip3') },
  { content: _t18('recharge_tip4') }
])
const tipList2 = reactive([{ content: _t18('recharge_tip5') }])
const num = ref('')
const fileList = ref([])
const afterRead = (file) => {
  file.status = 'uploading'
  // 此时可以自行将文件上传至服务器
  let formData = new FormData()
  formData.append('file', file.file)
  uploadImg(formData).then((res) => {
    res = res.data
    if (res.code == '200') {
      file.res = res.data.url
      file.status = 'success'
    } else {
      showToast(res.msg)
      fileList.value = []
    }
  })
}
const submit = debounce(() => {
  if (!['coinsexpto'].includes(__config._APP_ENV) && num.value == '') {
    _toast('recharge_num') // 请填写充值数量
    return
  }
  let filePath = ''
  if (['coinsexpto'].includes(__config._APP_ENV)) {
    // 特殊平台不用上传图片
  } else {
    if (fileList.value.length == 0) {
      _toast('recharge_img') // 请上传截图
      return
    }
    const file = fileList.value[0] || {}
    filePath = file.res
    if (file.status != 'success') {
      _toast('recharge_img_load') // 图片上传中,稍后重试
      return
    }
  }
  let params = {}
  if (!['coinsexpto'].includes(__config._APP_ENV)) {
    params = {
      amount: priceFormat(num.value),
      type: route.query.type,
      coin: route.query.coin,
      filePath: filePath || '',
      address: address.value,
      adress: adress.value
    }
  } else {
    params = {
      amount: 0,
      type: route.query.type,
      coin: route.query.coin,
      address: address.value,
      adress: adress.value
    }
  }

  rechargeSubmit(params).then((res) => {
    if (res.code == '200') {
      _toast('recharge_success') // 充值成功
      num.value = ''
      setTimeout(() => {
        _toView('/recharge-order')
      }, 500)
    } else {
      showToast(res.msg)
    }
  })
}, 500)

const mainStore = useMainStore()
/**
 * 充值地址
 */
const address = computed(() => {

  let rechargeObj = mainStore.getRechargeList.find((elem) => elem.coinName == route.query.type)
  return rechargeObj.coinAddress
})
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
  color: var(--ex-default-font-color);
}

.recharge-container {
  min-height: 100vh;
  // background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 20px;
  padding-top: 100px; /* 增加更多顶部间距 */
  position: relative;
}

/* 确保 HeaderBar 固定在顶部 */
:deep(.header-bar) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  height: 60px !important;
}

/* 如果 HeaderBar 有特定的类名，也添加样式 */
:deep(.header-container) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  height: 60px !important;
}

// 二维码区域
.qr-section {
  padding: 20px 15px 0;
  margin-top: 60px;
  display:block;
  
  .qr-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 30px 25px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;

    
    .qr-header {
      position: relative;
      z-index: 2;
      margin-bottom: 25px;
      
      .qr-title {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 8px;
      }
      
      .qr-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        margin: 0;
      }
    }
    
    .qr-code-wrapper {
      position: relative;
      z-index: 2;
      display: inline-block;
      padding: 20px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
  }
}

// 申请信息区域
.applyMes {
  padding: 0 15px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  // box-sizing: border-box;


  .info-card {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    // width: 93%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 15px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      padding: 20px 25px 15px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      
      .header-icon {
        font-size: 24px;
        margin-right: 15px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }
      
      .header-text {
        flex: 1;
        
        .card-title {
          color: var(--ex-font-color6);
          font-size: 18px;
          font-weight: 600;
          margin: 0 0 5px;
        }
        
        .card-subtitle {
          color: var(--ex-passive-font-color);
          font-size: 14px;
          margin: 0;
          opacity: 0.8;
        }
      }
    }
    
    .card-content {
      padding: 20px 25px 25px;
    }
  }
  
  // 地址卡片
  .address-card {
    
    .copy-btn {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .copy-icon {
          margin-right: 6px;
          font-size: 14px;
        }
        
        .copy-text {
          font-size: 13px;
          font-weight: 500;
        }
    }
    .address-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 5px;
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      
      &:hover {
        background: #e9ecef;
        border-color: #667eea;
      }
      
      .address-text {
        flex: 1;
        word-break: break-all;
        color: var(--ex-font-color6);
        font-size: 14px;
        // margin-right: 15px;
        font-family: 'Courier New', monospace;
        height:25px;
        line-height: 25px;
        padding:5px;
        background: transparent;
        border: none;
        outline: none;
      }
      

    }
  }
  
  // 数量输入卡片
  .amount-card {
    .input-wrapper {
      position: relative;
      
      .amount-input {
        width: 100%;
        padding: 15px 50px 15px 20px;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        font-size: 16px;
        color: var(--ex-font-color6);
        background: #f8f9fa;
        transition: all 0.3s ease;
        
        &:focus {
          outline: none;
          border-color: #667eea;
          background: #fff;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        &::placeholder {
          color: var(--ex-font-color5);
          font-size: 14px;
        }
      }
      
      .input-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: var(--ex-passive-font-color);
      }
    }
  }
  
  // 上传卡片
  .upload-card {
    .van-uploader {
      width: 100%;
      
      :deep(.van-uploader__input-wrapper) {
        width: 100%;
      }
    }
    
    .upload-area {
      border: 2px dashed #e9ecef;
      border-radius: 12px;
      padding: 40px 20px;
      text-align: center;
      background: #f8f9fa;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        border-color: #667eea;
        background: #f0f2ff;
      }
      
      .upload-icon {
        margin-bottom: 15px;
        font-size: 48px;
        opacity: 0.6;
      }
      
      .upload-text {
        color: var(--ex-font-color6);
        font-size: 16px;
        font-weight: 500;
        margin: 0 0 8px;
      }
      
      .upload-hint {
        color: var(--ex-passive-font-color);
        font-size: 12px;
        margin: 0;
      }
    }
  }
}

// 操作按钮区域
.action-section {
  padding: 20px 15px;
  
  .action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    .btn-icon {
      margin-right: 8px;
      font-size: 18px;
    }
    
    .btn-text {
      font-size: 16px;
    }
    
    &.copy-btn {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      color: #fff;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
      }
    }
    
    &.submit-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

// 提示信息区域
.tips-section {
  padding: 0 15px 20px;
  
  .tips-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    .tips-header {
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      padding: 20px 25px;
      
      .tips-title {
        color: #8b4513;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
      }
    }
    
    .tips-content {
      padding: 20px 25px 25px;
      
      .tip-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .tip-icon {
          font-size: 16px;
          margin-right: 12px;
          margin-top: 2px;
        }
        
        .tip-number {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: #fff;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
          margin-right: 12px;
          margin-top: 2px;
          flex-shrink: 0;
        }
        
        .tip-text {
          color: var(--ex-font-color6);
          font-size: 14px;
          line-height: 1.5;
          flex: 1;
        }
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}
</style>

